new WOW().init();


$(function () {
    active();
    card();
    addClientImg();
    customers();
    footer();
    show();
})

function active() {
    $('header .nav-link').click(function () {
        $(this).addClass('active').parent().siblings().children().removeClass('active');
    })
}



// 卡片数据
let card_left = [
    {
        title: ' LOCATION TRACKING VIA GPS',
        context: 'Do you manage and off-site team and want to know who went where? Our GPS tracker is here!',
        new: true
    },
    {
        title: 'TIME TRACKING MOBILE APP',
        context: 'Use mobile apps available on iOS and Android which synchronizes perfectly with a web app to track time and projects regardless of the location.'
    }, {
        title: 'PROJECT MANAGEMENT',
        context: 'Distribute the work on projects and tasks and track the progress performed by your team. Bill your time on the particular tasks and make sure you will never exceed any budget.'
    }, {
        title: 'INTEGRATIONS',
        context: 'Integrate your favorite applications with TimeCamp to enjoy logging time without creating entries manually. You can also build your own integrations with our public API.',
        new: true
    },
    {
        title: 'INVOICING',
        context: 'Easily create and fill up automatically the invoices with proper rates by settings hourly costs for either tasks or users'
    }
]


let card_right = [
    {
        title: 'AUTOMATIC TIME TRACKING',
        context: 'TimeCamp records the time and assigns it to the projects automatically. Not even one click is needed for accurate billing.'
    }, {
        title: 'DESKTOP APP',
        context: 'Track time with a smart desktop application which includes the full feature set available within the web application.'
    }, {
        title: 'TEAM MANAGEMENT',
        context: 'Get a complete cooperation tool for your company equipped with all the features necessary to run the business smoothly.',
        new: true
    }, {
        title: 'ATTENDANCE TRACKER',
        context: 'Easily check your team’s attendance, efficiency, and performance. Know when they start and end their job and easily track vacations, holidays and any other kinds of work leaves.'
    }, {
        title: 'COMPUTER TIME',
        context: 'You can monitor everything you do on the computer and measure the efficiency within the tasks you perform.'
    }
]

// 添加卡片
function card() {
    for (let i = 0; i < card_left.length; i++) {
        let card = `
        <div class="card txt-card wow animate__animated animate__fadeInTopLeft">
                        <div class="card-body">
                            <h5 class="card-title font-weight-bold">${card_left[i].title}</h5>
                            <p class="card-text">${card_left[i].context}</p>
                        </div>
                    </div>
        `;

        $('.card-left').eq(0).append(card);
        if (card_left[i].new) {             //添加new
            $('.card-left .card-body').eq(i).addClass('new');
        }
    }

    for (let i = 0; i < card_right.length; i++) {
        let card = `
        <div class="card txt-card wow animate__animated animate__fadeInTopRight">
                        <div class="card-body">
                            <h5 class="card-title font-weight-bold">${card_right[i].title}</h5>
                            <p class="card-text">${card_right[i].context}</p>
                        </div>
                    </div>
        `;

        $('.card-right').eq(0).append(card);
        if (card_right[i].new) {             //添加new
            $('.card-right .card-body').eq(i).addClass('new');
        }
    }
}

let cilent_img = [
    "./images/xtb.png",
    "./images/logo.png",
    "./images/R.png",
    "./images/orange.png",
    "./images/gefco.png",
    "./images/betahaus.png",
    "./images/advantago.png",
    "./images/grecos.png",
    "./images/logo1.png",
    "./images/dsv1.png",
    "./images//parker.png",
    "./images/internet-marketing-inc.png",
    "./images//havas-media.png"
]

function addClientImg() {
    cilent_img.forEach(element => {
        let con = `
        <div class="col-4">
            <img src="${element}" alt="">
        </div>
        `;
        $('.client').eq(0).append(con);
    });
}

// The proof is in the numbers and successful customers模块数据
let customer = [
    {
        img: './images/icon-market.png',
        num: 10,
        txt: 'years on the market'
    }, {
        img: './images/icon-active-users.png',
        num: 10000,
        txt: 'teams'
    }, {
        img: './images/icon-chat.png',
        num: '24 / 7',
        txt: 'livechat available'
    }, {
        img: './images/icon-clock.png',
        num: 650,
        txt: 'positive reviews on capterra and getapp'
    }, {
        img: './images/icon-market.png',
        num: 280000,
        txt: 'active users'
    }, {
        img: './images/icon-reviews.png',
        num: 3,
        txt: 'average first time response'
    }
]

// 添加数据
function customers() {
    customer.forEach(element => {
        var tag = `
        <div class="col-lg-2 col-md-6 col-6 wow animate__animated animate__zoomIn">
                <p class="wrap rounded-pill">
                    <img src="${element.img}" alt="">
                </p>
                <span class="number font-weight-bold">${element.num}</span><br>
                <span class="txt font-weight-lighter">${element.txt}</span>
            </div>
        `;
        $('#con-the-proof .row').eq(0).append(tag);
    });
}

let footdata = [
    {
        title: 'Product',
        con: [
            'Features',
            'Integrations',
            'Desktop app',
            'Time tracking Android app',
            'Time tracking iOS app'
        ]
    }, {
        title: 'Support',
        con: [
            'Support',
            'Knowledge base',
            'Developers API',
            'Product updates',
            'Server Status',
            'Features',
            'Press',
            'Customer Stories'
        ]
    }, {
        title: 'Integrations',
        con: [
            'Trello',
            'Podio',
            'Asana',
            'Calendar',
            'Insightly',
            'Zapier',
        ]
    }, {
        title: 'Resources',
        con: [
            'Blog',
            'Contact',
            'Sitemap',
            'HeySpace',
            'Other resources',
            'Jobs'
        ]
    }
]


function addli(content) {
    let li = '';
    content.forEach(item => {
        li += `
        <li>
            <a href="#">${item}</a>
        </li>
    `
    })
    return li;
}

// 加载底部数据
function footer() {
    footdata.forEach(element => {
        let div = `
        <div class="col-sm-3 col-12 text-center text-sm-left">
            <p>${element.title}</p>
            <ul class="list-unstyled">
                 ${addli(element.con)}
            </ul>
        </div>
        `;
        $('footer .row').eq(0).append(div);
    });
}

function show() {
    // 显示
    $('.server').eq(0).click(function () {
        $('.dialog').eq(0).animate({ height: '625px', width: '310px' }, 100).show(100);
        $('.server').eq(0).hide(200);
    })
    sendMess();
    // 关闭
    $('#closes').click(function () {
        $('.dialog').eq(0).animate({ height: '0px', width: '0px' }).fadeOut(1000);
        $('.server').eq(0).show();
    })
}

function sendMess() {
    $('#send-msg').keydown(function (e) {
        // console.log(e.keyCode);
        if (e.keyCode == 13) {
            addTag();
        }
    })

    $('#send').click(function () {
        addTag();
    })
}

function addTag() {
    var date = new Date();
    var txt = $('#send-msg').val();
    var time = date.getHours() + ':' + date.getMinutes();
    if (txt === '') {
        alert('can not be null');
        return false;
    }
    var tag = `
        <li class="you text-right">
            <p class="tip mb-0">You
                <span class="d-inline-block">${time}</span>
            </p>
            <p class="mb-0 content">${txt}</p>
            <span class="d-block active">error!</span>
        </li>
        `;
    $('footer .middle-con').eq(0).append(tag);
    $('#send-msg').val('');
}
